<template>
  <div>
    <div class="isShowNav">
      <ul class="flex">
        <ul>
          <li><img src="../../../assets/images/logo.png" alt="" /></li>
        </ul>
        <ul class="box" @click="hanldeClick">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </ul>
    </div>
    <el-row class="tac" v-if="isShowNav">
      <el-col :span="24">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">交易</template>
            <el-menu-item index="2-1">交易产品</el-menu-item>
            <el-menu-item index="2-2">交易账户</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">LAB 与工具</template>
            <el-menu-item index="3-1">数据中心</el-menu-item>
            <el-menu-item index="3-2">交易工具</el-menu-item>
            <el-menu-item index="3-3">学习中心</el-menu-item>
          </el-submenu>
          <el-menu-item index="4">合作伙伴</el-menu-item>
          <el-submenu index="5">
            <template slot="title">关于 RI FULL</template>
            <el-menu-item index="5-1">RI FULL介绍</el-menu-item>
            <el-menu-item index="5-2">FAQ</el-menu-item>
          </el-submenu>
          <el-menu-item index="6">免费开户</el-menu-item>
          <el-menu-item index="7">登录</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isShowNav: false
    }
  },
  methods: {
    hanldeClick() {
      this.isShowNav = !this.isShowNav
    },
    handleSelect(key) {
      let map = {
        '1': '/',
        '2-1': '/tradeProducts',
        '2-2': '/tradeAccount',
        '3-1': '/dataCenter',
        '3-2': '/tradTool',
        '3-3': '/learnCenter',
        '4': '/partners',
        '5-1': '/RI',
        '5-2': '/FAQ',
        '6': '/freeAccount',
        '7': '/login'
      }
      this.$router.push(map[key])
    }
  }
}
</script>
<style scoped>
.flex {
  height: 36px;
  background-color: #fff;
  justify-content: space-between;
  display: flex;
  align-items: center;
}
.box li {
  width: 30px;
  border: 1px solid red;
  margin-top: 10px;
}
</style>
